<template>
  <div>
    <div>
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <div style="height: 350px; display: block; overflow: auto; margin-top: 8px;">
        <el-tree
          ref="projectGroupTree"
          :data="treeData"
          :props="defaultProps"
          @node-expand="expand"
          @node-collapse="collapse"
          @current-change="handleCurrentChange"
          :default-expanded-keys="defaultExpandedKeys"
          :highlight-current="true"
          node-key="id"
          class="nodes-tree"
          :expand-on-click-node="false"
          :filter-node-method="filterNode">
        </el-tree>
      </div>
    </div>
    <div class="menu-navbar">
      <el-button size="small" type="primary" @click="doSave">确 定</el-button>
      <el-button size="small" @click="closeCom">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {
    selectGroupTreeByParentId
  } from '@/api/apiModel/apiProject.js'
  import '@/styles/newstyle.scss'
  // const store = require('store')

  export default {
    name: 'projectGroupTreeCom',
    data() {
      return {
        loading: false,
        defaultExpandedKeys: [],
        dappendVisible: false,
        queryArgs: {},
        filterText: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        selectGroup: null
      }
    },
    props: ['componentCustomProps'],
    created() {
      this.fetchData()
    },
    watch: {
      filterText(val) {
        this.$refs.projectGroupTree.filter(val)
      }
    },
    components: {
    },
    mounted() {
      // this.handleReset()
    },
    methods: {
      fetchData() {
        this.selectGroup = null
        selectGroupTreeByParentId({}, '').then(res => {
          let tempTreeData = [{
            id: '****',
            name: '默认分组',
            parent_id: '99999',
            level: 0,
            data_id: '****',
            data_parent_id: '99999',
            sort: 0,
            other: {
              status: 0
            },
            children: res.data.data
          }]
          this.treeData = tempTreeData
          this.setDefaultExpandedKeys(this.treeData)
          // for (var i = 0; i < 10; i++) {
          //   res.data.data.forEach((item, index) => {
          //     item.id = item.id + i
          //     this.treeData.push(item)
          //   })
          // }
        }).catch((err) => {
          console.log(err)
        })
      },

      expand(data) {
        // this.expandedKeys.push(data.id)
      },
      collapse() {
        // this.expandedKeys.pop()

      },
      setDefaultExpandedKeys(data) {
        //
        let keys = []
        data.forEach((item, index) => {
          keys.push(item.id)
        })
        this.defaultExpandedKeys = keys
      },
      handleCurrentChange(data, node) {
        //
        this.selectGroup = {
          id: data.data_id,
          name: data.name,
          parentId: data.parent_id
        }
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      doSave() {
        if (!this.selectGroup) {
          this.$message({
            type: 'error',
            message: '请选择分组'
          })
        } else if (this.componentCustomProps.curGroupId === this.selectGroup.id) {
          this.$message({
            type: 'warning',
            message: '选择的分组与原分组一致，无需移动！'
          })
        } else {
          this.$emit('closeDialog', 1, this.selectGroup)
        }
      },
      closeCom() {
        this.$emit('closeDialog', 0)
      }
    }
  }
</script>
<style scoped>
  .custom-tree-node .custom-tree-nodetit {
    /* color: red; */
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  .custom-tree-node .custom-tree-nodetit:hover{
    /* overflow: visible; */
    /* width:90px;
    display: inline-block; */
  }

  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:4px;
    margin-left: 4px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
    height: 100%;
    overflow-y: auto;
  }
  .minSize{
    padding:4px;
  }
  .height100{
    border-right: 1px solid #ccc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .span-title{
    float: left;
    line-height: 16px;
    border-left:4px solid #000;
    padding-left: 10px;
    font-size: 16px;
    margin-top: 7px;
  }
  .myDialog{
    padding: 0px;
  }
</style>
